<template>
    <div class="furnaceIgnitionPopup" :style="popupStyle">
        <div class="title">
            <img src="@/assets/images/digitalProduction/titleIcon.png" alt="">
            <span>{{ state.dataName }}</span>
        </div>
        <div class="line"></div>
        <div class="content">
            <div class="item" v-for="(item, index) in state.dataList">
                <div v-if="item.state" class="circle"></div>
                <div v-else class="circleRed"></div>
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { dataTool } from 'echarts';


const props = defineProps({
    top: {
      type: String,
      default: '0px'
    },
    left: {
      type: String,
      default: '0px'
    },
    data: {
      type: Object,
      default: {}
    }
})
let popupStyle = reactive({
    position: 'absolute' as 'absolute',
    top: props.top,
    left: props.left,
})
let state = reactive({
    dataList: [
    ] as any,
    dataName: '' 
})
state.dataList = props.data.dataList
state.dataName = props.data.dataName
console.log('popupStyle', popupStyle);

</script>

<style lang="scss" scoped>
.furnaceIgnitionPopup {
    width: vh(277);
    min-height: vh(100);
    z-index: 999;
    background: rgba(0, 25, 35, 0.7);
    border: vh(1) solid #00B1E1;
    padding-left: vh(13);
    padding-right: vh(14);
    padding-bottom: vh(16);
    .title {
        display: flex;
        align-items: center;
        img {
            width: vh(12);
            height: vh(11);
            margin-right: vh(7);
        }
        span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(14);
            color: #FFFFFF;
            line-height: vh(39); 
        }
    }
    .line {
        width: vh(250);
        height: vh(1);
        border: vh(1) solid #FFFFFF;
        opacity: 0.2;
        margin-bottom: vh(10);
    }
    .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 每行两个列 */
        gap: 5px; /* 控制项之间的间距 */
        .item {
            // border: 1px solid #ddd;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(12);
            color: #FFFFFF;
            display: flex;
            align-items: center;
            .circle {
                width: vh(10);
                height: vh(10);
                background: #00FFA8;
                border-radius: 50%;
                margin-right: vh(6);
            }
            .circleRed {
                width: vh(10);
                height: vh(10);
                background: #FF3232;
                border-radius: 50%;
                margin-right: vh(6);
            }
        }
    }
}
</style>